<template>
    <div class="detail">
       <detailnav class="detailnav" ref="detailnav" @titleclick='titleclick'></detailnav>
        <!-- 导入swiper -->
        <bscorll class="detailscoll" ref="scorlldetail" @isshowbacktop="detashowbacktop">
            <van-swipe :autoplay="3000" :height='200'>
               <van-swipe-item v-for="(item, index) in swiperlist" :key="index">
                    <img :src="item" class="imgswiper" />
               </van-swipe-item>
            </van-swipe>
            <detailbasc :goods="goods"></detailbasc>
            <detail-shop-info :shop="shop"></detail-shop-info>
            <detailgoodsinfo :detail-info="detailinfo"></detailgoodsinfo>
            <detailparaminfo ref="params" :paramInfo="paraminfo"></detailparaminfo>
            <detailcomment ref="comment" :commentInfo="commentinfo"></detailcomment>
            <goodlist ref="goodlist" :goods="goodslist"></goodlist>
        </bscorll>
        <detailfoot @addCart="addCart"></detailfoot>
        <backtop v-show="isshow" @click.native="detailbacktop"></backtop>
        <toast message="添加成功" :toisshow="toisshow"></toast>
    </div>
</template>

<script>
import detailnav from './detailnav/detailnav'
import detailbasc from './detailbasc/detailbasc'
import DetailShopInfo from './childcoms/detailshopinfo'
import bscorll from '@/components/common/bscoll/Scorll'
import detailgoodsinfo from  './childcoms/detailgoodsinfo'
import detailparaminfo from './childcoms/detailparmeinfo'
import detailcomment from './childcoms/detailcomment'
import goodlist from '@/components/content/goods/goodslist'
import backtop from '@/components/content/backtop/Backtop'
import detailfoot from './childcoms/detailfoot'
import toast from '@/components/common/toast/toast'
import {getdetail,Goods,Shop,GoodsParam,getRecommend } from '@/network/detail.js'
export default {
    name:'detail',
    components:{
         detailnav,
         detailbasc,
         DetailShopInfo,
         bscorll,
         detailgoodsinfo,
         detailparaminfo,
         detailcomment,
         goodlist,
         backtop,
         detailfoot,
         toast   
    },
    data() {
        return {
            iid:null,
            swiperlist:[],
            goods:{},
            shop:{},
            detailinfo:{},
            paraminfo:{},
            commentinfo:{},
            goodslist:[],
            isshow:false,
            themtopY:[] ,
            toisshow:false       
            }
    },
    created() {
        
        this.iid = this.$route.params.id
        getdetail(this.iid).then(res=>{
            this.swiperlist = res.result.itemInfo.topImages
            const data = res.result
            this.goods = new Goods(data.itemInfo,data.columns,data.shopInfo.services)
            this.shop = new Shop(data.shopInfo)
            this.detailinfo = data.detailInfo
            this.paraminfo = new GoodsParam(data.itemParams.info,data.itemParams.rule)
            this.commentinfo = data.rate.cRate!==0? data.rate.list[0]:{}
          
        }),
        
        getRecommend().then(res=>{
            this.goodslist = res.data.list})
            
    },
    methods: {
        detailbacktop(){
            this.$refs.scorlldetail.bscoll.scrollTo(0,0,1000)
        },
        detashowbacktop(postion){
            if(0<=-postion.y &&-postion.y+44<this.themtopY[1])
            { this.$refs.detailnav.curentindex = 0}
            if(this.themtopY[1]<=-postion.y+44 && -postion.y+44 <this.themtopY[2])
            { this.$refs.detailnav.curentindex = 1}
            if(this.themtopY[2]<=-postion.y+44 && -postion.y+44<this.themtopY[3])
            { this.$refs.detailnav.curentindex = 2}
            if(this.themtopY[3]<=-postion.y+44 )
            { this.$refs.detailnav.curentindex = 3}
            this.isshow = postion.y>-1000?false:true
        },
        titleclick(i){
            this.$refs.scorlldetail.bscoll.scrollTo(0,-this.themtopY[i]+44,1000)   
        },
        addCart(){
            const product = {}
            product.title = this.goods.title
            product.desc = this.goods.desc
            product.image = this.swiperlist[0]
            product.price = this.goods.realPrice
            product.iid = this.iid
            this.toisshow = true
            setTimeout(()=>{
                this.toisshow = false
            },3000)
            this.$store.dispatch('addcart',product)
        }
    },
    updated() {
         this.$nextTick(()=>{
                this.themtopY = []
                this.themtopY.push(0),
                this.themtopY.push(this.$refs.params.$el.offsetTop)
                this.themtopY.push(this.$refs.comment.$el.offsetTop)
                this.themtopY.push(this.$refs.goodlist.$el.offsetTop)
                console.log(this.themtopY)
        })
    },
    
}
</script>

<style scoped>
.detail{
    height: 100vh;
    position: relative;
    z-index: 999;
    background-color: #fff;

    
}
.detailnav{
    border-bottom: 1px solid #ccc;
}
.imgswiper{
    height: 100%;
    width: 100%;
}
.detailscoll{
    height: calc(100% - 104px);
    overflow: hidden;
}
</style>